<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/start/jquery-ui-1.9.0.custom.min.css" />
    <link rel="stylesheet" type="text/css" href="css/layout-default-latest.css" />


    <script type="text/javascript">

        var progressValue = 50;
        $(document).ready(function()
        {

            $('#loader').click(function() {
                var html1;
                $.ajax({
                    type: "GET",
                    url: "data/announcement.xml",
                    dataType: "xml",
                    success: function(xml) {
                        $('#select1').html('');
                        $(xml).children().find('NOTIFICATION ZPM_MIR_NOTE_MAS').each(function(){
                            html1 = '<option value="{0}" body="{1}" date="{3}">{2}</option>';
                            html1 = html1.replace('{0}', ($(this).find('NOTE_ID').text()));
                            html1 = html1.replace('{1}', ($(this).find('NOTE_TEXT').text()));
                            html1 = html1.replace('{2}', ($(this).find('NOTE_TITLE').text()));
                            html1 = html1.replace('{3}', ($(this).find('CREATED_ON').text()));

                            $('#select1').append(html1);
                        });
                        $('#select1').change(function() {
                            var title = $(this).find(':selected').text();
                            var body = $(this).find(':selected').attr('body');
                            var id = $(this).find(':selected').attr('value');
                            var date = $(this).find(':selected').attr('date');
                            $('#txt_tab_label').attr('value', title);
                            $('#txt_tab_id').val(id);
                            $('#txt_tab_content').val(body);
                            $('#datepicker').val(date);
                        })
                    }
                });
            })  ;


            $('#opener').click(function() {
                var $dialog = $('<div></div>')
                        .html($("#txt_tab_content").val())
                        .dialog({
                            autoOpen: false,
                            title: $("#txt_tab_label").val(),
                            show: "blind",
                            hide: "explode",
                            delay: 1000
                        });
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });

            $('#increase').click(function() {
                progressValue++;
                $( "#progressbar" ).progressbar({
                    value: progressValue
                });
            });

            $(function() {
                $( "#opener" ).tooltip({
                    show: {
                        effect: "slideDown",
                        delay: 10
                    }
                });
            });

            $(function() {
                $( "#progressbar" ).progressbar({
                    value: progressValue
                });
            });



            //make href as a button
            $(function() {
                $( "a" )
                        .button()
                        });

            $( "#datepicker" ).datepicker({
                showOn: "button",
                buttonImage: "images/icons/calendar.gif",
                buttonImageOnly: true
            });

        });



    </script>
    <style type="text/css">
        td {
            vertical-align: top;
            border: 1px solid #acdd4a;

        }
        td:first-child {
            background-color: #acdd4a;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <h2>All Announcements</h2>
        </td>
        <td style="width: 100%">
            <h2>Announcement Message</h2>
        </td>
    </tr>
    <tr>
        <td>

        </td>
        <td>
            <b>ID:</b> <input type="text" id="txt_tab_id" value="" readonly />
            <b>Date:</b> <input type="text" id="datepicker" value="01/18/2012" readonly />
            <b>Title:</b> <input type="text" id="txt_tab_label" />
        </td>
    </tr>

    <tr>
        <td>
            Messages List:<br/>
            <select id="select1" size="15" style="width: 300px;"></select>
        </td>
        <td>
            Message:<br/>
            <textarea id="txt_tab_content" rows="15" cols="80">content 1111</textarea>

            <div style="display: none">
                <a href="#" id="increase">progressbar</a>
                <div id="progressbar"></div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <a href="#" id="loader" title="this is the news written by the admin...">Load</a>
        </td>
        <td>
            <!--a href="#" id="opener" title="this is the news written by the admin...">Preview</a-->
            <a href="#" id="opener">Preview</a>
            <a href="#" id="update">Update</a>
            <a href="#" id="delete">Delete</a>
        </td>
    </tr>
</table>




</body>
</html>